<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"
          th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/toastr.css}">
    <script type="text/javascript" th:src="@{https://code.jquery.com/jquery-3.3.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script type="text/javascript"
            th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/toastr.js}"></script>
</head>
</head>
<style>
    .table {
        margin: auto;
    }
    .toast-center-center {
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -150px;
    }
</style>
<body>
<div>
    <div th:replace="home/index :: navbar"></div>

    <div style="padding-top: 150px;">
        <div style="display: flex;width:100%;justify-content: center;margin: 30px">
            <button id="add" type="button" class="btn btn-outline-primary btn-lg " data-toggle="modal"
                    data-target="#exampleModalCenter">
                注册用户
                <img id="aaa" th:src="@{/img/加.png}"
                     width="30px" height="30px;"
                     style="margin-bottom: 5px">
            </button>
        </div>

        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalCenterTitle">注册用户</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container my-5">
                            <form action="/addMatch">
                                <div class="form-row">

                                    <div>
                                        <label id="msg"></label>
                                    </div>

                                    <div class="form-group col-12">
                                        <label for="userAccount">用户账号：</label>
                                        <input type="text" id="userAccount" placeholder="请输入用户账号" class="form-control">
                                    </div>

                                    <div class="form-group col-12">
                                        <label for="userPsw">用户密码：</label>
                                        <input readonly value="123456" type="password" id="userPsw"
                                               placeholder="请输入用户密码" class="form-control">
                                        <small id="passwordHelpInline" class="text-muted">
                                            默认为123456.
                                        </small>
                                    </div>

                                    <div class="form-group col-12">
                                        <label for="userStatus">用户类型：</label>
                                        <select class="form-control" id="userStatus">
                                            <option value="0">系统管理员</option>
                                            <option value="1">比赛管理员</option>
                                            <option value="2">普通用户</option>
                                        </select>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="addUser">确认添加</button>
                    </div>
                </div>
            </div>
        </div>

        <table class="table table-bordered" style="width: 80%;">
            <thead class="thead-light">
            <tr>
                <th scope="col">账号</th>
                <th scope="col">用户名</th>
                <th scope="col">联系方式</th>
                <th scope="col">用户类型</th>
                <th scope="col">用户状态</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="user : ${user}">
                <td th:text="${user.userAccount}"></td>
                <td th:text="${user.userName}"></td>
                <td th:text="${user.userTel}"></td>
                <div th:switch="${user.userStatus}">
                    <td th:case="0" th:text="系统管理员"></td>
                    <td th:case="1" th:text="比赛管理员"></td>
                    <td th:case="2" th:text="普通用户"></td>
                </div>
                <td th:text="${user.userIsvalid}==0?'已注销':'正常'">
                <td width="320px">
                    <button th:onclick="'javascript:isValid(' + ${user.userId} + ',' + ${user.userIsvalid} + ');'"
                            style="margin-left: 20px" th:if="${user.userIsvalid}==1" type="button"
                            class="b11 btn btn-outline-danger">注销用户
                        <img class="b1" th:src="@{/img/注销.png}"
                             width="20px" height="20px;"
                             style="margin-bottom: 5px">
                    </button>
                    <button id="b22"
                            th:onclick="'javascript:isValid(' + ${user.userId} + ',' + ${user.userIsvalid} + ');'"
                            style="margin-left:20px" th:if="${user.userIsvalid}==0" type="button"
                            class="b22 btn btn-outline-success">恢复用户
                        <img class="b2" th:src="@{/img/恢复用户.png}"
                             width="20px" height="20px;"
                             style="margin-bottom: 5px">
                    </button>
                    <button id="b33" th:onclick="'javascript:psw('+ ${user.userId} + ');'" style="margin-left: 40px"
                            type="button" class="b33 btn btn-outline-primary">重置密码
                        <img class="b3" th:src="@{/img/重置密码.png}"
                             width="20px" height="20px;"
                             style="margin-bottom: 5px"></button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    $(function () {
        toastr.options = {
            closeButton: false,
            debug: false,
            progressBar: true,
            positionClass: "toast-center-center",
            onclick: null,
            showDuration: "300",
            hideDuration: "1000",
            timeOut: "2000",
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };
        $('#userAccount').focus(function () {
            $('#msg').html("请继续输入")
        }).blur(function () {
            if ($('#userAccount').val().length == 0) {
                $('#msg').html("<font color='red'><b>账号不能为空</b></font>");
                return false;
            } else {
                $.ajax({
                    url: 'ifAccount',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        "userAccount": $('#userAccount').val()
                    },
                    success: function (res) {
                        if (res) {
                            $('#userAccount').css({
                                border: "1px solid red",
                                boxShadow: "0 0 2px red"
                            });
                            $("#addUser").attr("disabled", "true");
                            $('#msg').focus().html("<font color='red'><b>该账号已注册过</b></font>");
                        } else {
                            $('#msg').html("请继续输入");
                            $('#userAccount').css({
                                border: "1px solid #e3f2fd",
                                boxShadow: "none"
                            });
                            $("#addUser").removeAttr("disabled");
                        }
                    }
                })
            }
        })

        $('#addUser').click(function () {
            if ($('#userAccount').val().length == 0) {
                $('#userAccount').focus()
                $('#msg').html("<font color='red'><b>账号不能为空</b></font>");
                return false;
            }
            if ($('#userPsw').val().length == 0) {
                $('#userPsw').focus()
                $('#msg').html("<font color='red'><b>密码不能为空</b></font>");
                return false;
            }
            if ($('#userStatus').val().length == 0) {
                $('#userStatus').focus()
                $('#msg').html("<font color='red'><b>用户类型不能为空</b></font>");
                return false;
            }
            $.ajax({
                url: '/addUser',
                type: 'POST',
                dataType: 'json',
                data: {
                    "userAccount": $('#userAccount').val(),
                    "userPsw": $('#userPsw').val(),
                    "userStatus": $('#userStatus').val()
                },
                success: function (res) {
                    if (res.code == 0) {
                        toastr.success('注册用户成功');
                        $('#exampleModalCenter').modal('hide');
                        window.setTimeout("window.location.reload()", 1000);
                    } else {
                        toastr.error('注册用户失败');
                        $('#exampleModalCenter').modal('hide');
                    }
                }
            })
        })

        $("#add").hover(function () {
            $("#aaa").css("content", "url(\"/img/加2.png\")");
        }, function () {
            $("#aaa").css("content", "url(\"/img/加.png\")");
        });
    });
</script>

<script th:inline="javascript">

    function isValid(userId, userIsvalid) {
        $.ajax({
            url: "/updateIsvalid",
            type: "POST",
            dataType: "json",
            data: {
                userId: userId,
                userIsvalid: userIsvalid,
            },
            success: function (res) {
                if (res.code == 0) {
                    toastr.success(res.data);
                    window.setTimeout("window.location.reload()", 1000);
                } else {
                    toastr.error("修改失败");
                }
            }
        })
    }

    function psw(userId) {
        $.ajax({
            url: "/rePsw",
            type: "POST",
            dataType: "json",
            data: {
                userId: userId,
            },
            success: function (res) {
                if (res.code == 0) {
                    toastr.success(res.data);
                    window.setTimeout("window.location.reload()", 1000);
                } else {
                    toastr.error("重置失败");
                }
            }
        })
    }
</script>
</html>